<!-- 子组件 -->
<!-- ref: https://blog.csdn.net/weixin_42171053/article/details/116302728 -->

<template>
	<view>
		<view class="picker_view">
			<!-- 文本 -->
			<view class='picker_text' @click="myLog">
				<text>{{dc.text}}</text>
			</view>
			<view class="picker"  @click="selectDatePicker" >
				<view class="picker_input">
					<input maxlength="18"
					:placeholder="dc.placeholder"
					:value="dc.value"
					disabled="true"
					/>
				</view>
				
				<uni-icons class="icons" type="arrowright" size="20"/>
				
				<!-- <jpTimePicker
					ref='date-time'
					:datestype="dc.datestype"
					:datestring='dc.dateString'
					:startYear='dc.startYear'
					:endYear='dc.endYear'
					@confirm='handleChange'
				/> -->
				
				<view v-if="dc.endYear">
					<jpTimePicker
						ref='date-time'
						:datestype="dc.datestype"
						:datestring='dc.dateString'
						:startYear='dc.startYear'
						:endYear='dc.endYear'
						@confirm='handleChange'
					/>
				</view>
				<view v-else>
					<jpTimePicker
						ref='date-time'
						:datestype="dc.datestype"
						:datestring='dc.dateString'
						:startYear='dc.startYear'
						@confirm='handleChange'
					/>
				</view>
				
			</view>
		</view>
		
	</view>
	
</template>



<script>
	import jpTimePicker from '@/components/jp-timePicker/jp-timePicker.vue'
	export default {
		components: {
			jpTimePicker,
		},
		name: "bdTimePicker",
		props: ['dc'],
		data() {
			return {
				index: -1,
			};
		},
		watch:{
			// 解决异步加载带来的回显问题
			value(val){
				this.index = this.options.findIndex(item => item == val);
			}
		},
		methods: {
			
			selectDatePicker() {
				this.$refs['date-time'].show();
			},
			handleChange(e) {
				// this.index = e.target.value;
				// let currentValue = this.dc.names[this.index];
				this.dc.value = e;
				var res = {
					'value': e,
					'dc': this.dc,
				};
				this.$emit("retMsg", res);
			},
			myLog(){
				console.log('myLog this.dc.value --- ', this.dc.value);
			},
		}
	}
</script>


<style lang="scss" scoped>
	
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		// margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 35%;
	}
	.picker {
		width: 65%;
		float: right;
		display: flex;
	}
	.picker_input {
		width: 80%;
		float: left;
		text-align: right;
	}
	.picker_icons {
		float: right;
		width: 20%;
	}
</style>
